<template>
  <div class="photo">
    <div class="box">
      <div class="tops">
        <van-nav-bar title="修改头像" @click-left="onClickLeft">
          <template #left>
            <i class="iconfont iconbtn_nav_back"></i>
          </template>
        </van-nav-bar>
      </div>
    </div>
    <div class="content">
      <van-uploader
        v-model="fileList"
        multiple
        :after-read="afterRead"
        preview-size="200px"
        :show-upload="ishow"
        @delete="closed"
      />
    </div>
  </div>
</template>

<script>
// 导入bus方法
// import bus from '../../../utils/bus'
import { uploadAvatar } from '../../../api/api'
export default {
  created () {},
  data () {
    return {
      ishow: false,
      imgurl: '',
      fileList: [
        { url: this.$store.state.userInfo.avatar }
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        // { url: this.imgurl, isImage: true }
        // http://47.106.228.28:1337/${this.imgurl}
      ]
    }
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    // 完成文件上传后触发此事件
    async afterRead (file) {
      await uploadAvatar(file.content)
      this.ishow = false
    },
    closed () {
      this.ishow = true
    }
  }
}
</script>

<style lang="less" scoped>
.photo {
  /deep/ .iconfont {
    font-size: 35px;
  }
  .content {
    margin-top: 30px;
    margin-left: 100px;
  }
}
</style>
